<template>
	<view class="trading">
		<u-sticky offset-top="0" style="background: #FFFFFF;">
			<u-tabs :list="tabList" :is-scroll="false" :current="active" @change="onChange"></u-tabs>
		</u-sticky>
		<view class="l-list">
			<view class="l-item" v-for="(item,index) in  orderList" :key="index">
				<view class="l-item-font row">
					<view class="title">单价：</view>
					<view class="font">{{item.money}}</view>
				</view>
				<view class="l-item-font row">
					<view class="title">数量：</view>
					<view class="font">{{item.num*1}}</view>
				</view>
				<view class="l-item-font row">
					<view class="title">总额：</view>
					<view class="font">{{item.price}}</view>
				</view>

				<view class="l-item-font row bu">
					<u-button type="success" size="small" @click="goOrder(item)" v-if="item.status == 1&&active!=1">去支付
					</u-button>
					<u-button type="primary" size="small" @click="cancelOrder(item)" v-if="item.status == 1&&active!=1">取消订单
					</u-button>
					<u-button type="primary" size="small" @click="configOrder(item)" v-if="item.status == 2">确认收款
					</u-button>
					<u-button type="primary" size="small" @click="LookPZ(item)" v-if="item.status == 2">查看凭证
					</u-button>
					<u-button type="primary" size="small" @click="goOrder(item)" v-if="item.status == 3">查看详情
					</u-button>
				</view>

			</view>
		</view>
		<u-popup v-model="show" mode="center">
			<view class="tab_box" :style="{ width: '300px',padding:'5px 0' }">
				<image :src="imgSrc" style="margin: 50px; width: 200px; height: 200px" alt="" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				upOption: {
					auto: false, // 是否自动加载
					page: {
						num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 5
				},
				active: 0,
				// 弹框
				show: false,
				// 图片
				imgSrc: "",
				// tab
				tabList: [{
						name: "待支付",
						state: 1
					},
					{
						name: "待打款",
						state: 2
					},
					{
						name: "待确认",
						state: 3
					},
					{
						name: "已完成",
						state: 4
					},
				],
				// 购买数据
				orderList: [],
			}
		},
		computed: {
			statusBarHeight() {
				return this.systemInfo.statusBarHeight;
			},

			navigationBarHeight() {
				return this.systemInfo.navigationBarHeight;
			},
			marginTop() {
				//#ifdef APP-PLUS
				return 0
				// #endif
				return this.systemInfo.navigationBarHeight;
			},
			headerHeight() {
				return (750 / uni.upx2px(750)) * (this.systemInfo.navigationBarHeight + this.systemInfo.statusBarHeight);
			}
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			this.upOption.page.num += 1
			console.log(this.upOption.page.num)
			if (this.upOption.page.num != 0) {
				this.getList(this.upOption.page)
			}
		},
		methods: {
			//初始化
			init() {
				this.getList(this.upOption.page)
			},
			onChange(e) {
				console.log(this.active)
				this.active = e.index;
				this.upOption.page.num = 1
				this.getList(this.upOption.page)
			},
			// 获取列表
			async getList(e) {
				console.log(e)
				const data = {
					page: e.num,
					status: this.tabList[this.active].state
				};
				const res = await this.$fun.ajax.post('/otc/otclist', {
					...data
				});
				if (res.code == 1) {
					const curList = res.data;
					if (e.num === 1) {
						this.orderList = [];
						//第一页清空数据重载
						if (curList.length > 0) {
							uni.pageScrollTo({
								scrollTop: 0,
								duration: 200
							});
						}
					}
					this.orderList = this.orderList.concat(curList); //追加新数据
					console.log(this.orderList)
				}
			},
			// 取消订单
			cancelOrder(item) {
				uni.showModal({
					content: '确定提交吗?',
					success: (e) => {
						if (e.confirm) {
							let prams = {
								id: item.id
							}
							this.$fun.ajax.post('/otc/delorder', {
								...prams
							}).then(res => {
								this.$fun.msg(res.msg)
								if (res.code == 1) {
									this.orderList = []
									this.upOption.page.num = 1
									this.getList(this.upOption.page)
								}
							})

						}
					}
				});
			},
			// 确认收款
			configOrder(item) {
				uni.showModal({
					content: '确定收款吗?',
					success: (e) => {
						if (e.confirm) {
							let prams = {
								id: item.id
							}
							this.$fun.ajax.post('/otc/yesorder', {
								...prams
							}).then(res => {
								this.$fun.msg(res.msg)
								if (res.code == 1) {
									this.orderList = []
									this.upOption.page.num = 1
									this.getList(this.upOption.page)
								}
							})
			
						}
					}
				});
			},
			// 查看凭证
			LookPZ(item) {
				this.imgSrc = item.image;
				this.show = true;
			},
			goOrder(item) {
				// this.$api.otc_dakuan({
				// 	id: item.id
				// }).then(res => {
				// 	if (res.code == 1) {
				uni.navigateTo({
					url: `/pageB/pay?id=${item.id}`
					// 		})
					// 	} else {
					// 		this.$fun.msg(res.msg)
					// 	}
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.top_flex {
		width: 100%;
		background: #FFFFFF;
		position: fixed;
		// #ifdef APP-PLUS
		top: 0rpx;
		// #endif
		// #ifdef H5
		top: 88rpx;
		// #endif
		z-index: 100;
	}

	.l-list {
		width: 100%;
		margin-top: 20rpx;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
		.l-item {
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 24rpx 30rpx;
			margin-bottom: 20rpx;

			.l-item-title {
				width: 100%;
				padding-bottom: 30rpx;
			}

			.l-item-font {
				width: 100%;
				height: 60rpx;
				button{
					width: 200rpx;
				}
				.status {
					width: 100rpx;
					height: 40rpx;
					background-color: #E4F8FD;
					border: 1rpx solid #A6C2FF;
					border-radius: 10rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #4A81F9;
					margin-left: 20rpx;
				
					&.two {
						background-color: #F7F7F7;
						border: 1rpx solid #E9E9E9;
						color: #999999;
					}
				}

				.u-btn--primary {
					color: #fff;
					border-color: #2979ff;
					background-color: #2979ff !important;

				}

				.u-btn--success {
					color: #ffffff;
					border-color: #19be6b;
					background-color: #19be6b !important;
				}

				.u-btn {
					margin-right: 10rpx;
				}
			}

			.bu {
				display: flex;
				justify-content: flex-end;
			}

			.title {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.font {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}

			.font2 {
				font-size: 26rpx;
				font-weight: 500;
				color: #4A81F9;
			}

			.btn-group {
				justify-content: flex-end;
				padding-right: 30rpx;

				.btn {
					width: 200rpx;
					height: 70rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #fff;
					background-color: $base-color;
					border-radius: 10rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}
	.row {
	    display: flex;
	    align-items: center;
	    position: relative;
	    padding: 0 16px;
	    height: 60px;
		.tit{
			width: 200rpx;
		}
	}
</style>
